<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .nav li a.router-link-active,
        .nav li a:hover,
        .nav li a:focus,
        .navbar-inverse .navbar-nav>li>a:hover,
        .navbar-nav>li>a:focus,
        .navbar-inverse .navbar-nav>li>a:focus {
            background-color: sandybrown;
            color: #fff;
        }

        .siderbar {
            height: 100vh;
            background-color: #f1f1f1f1;
        }
    </style>
</head>

<body style="padding-top: 50px;">
    <div id="app">
        <header class="navbar navbar-default navbar-inverse navbar-fixed-top">
            <div class="container">
                <ul class="navbar-nav nav">
                    <li>
                        <router-link to="/" exact>首页</router-link>
                    </li>
                    <li>
                        <router-link to="/goods">商品管理</router-link>
                    </li>
                    <li>
                        <router-link to="/user">用户管理</router-link>
                    </li>
                    <li>
                        <router-link to="/system">系统设置</router-link>
                    </li>
                </ul>
            </div>
        </header>
        <router-view class="container-fluid"></router-view>
    </div>

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../../lib/vue.js"></script>
    <script src="../../lib/vue-router.js"></script>
    <script>
        //1.先为路由页面创建组件
        const Home = {
            template: `<div><h1>这是首页</h1></div>`
        }
        //商品管理模块路由
        const GoodsOrder = {
            template: `<h1>这是订单管理</h1>`
        }
        const GoodsSku = {
            template: `<h1>这是库存管理</h1>`
        }
        const GoodsUpper = {
            template: `<h1>这是商品上架管理</h1>`
        }
        const GoodsSale = {
            template: `<h1>这是促销管理</h1>`
        }


        const Goods = {
            template: `<div class="row">
                <div class="col-md-2 siderbar">
                    <router-view name="siderbar"></router-view>
                </div>
                <div class="col-md-10 content">
                    <router-view name="content"></router-view>
                </div>
            </div>`
        }
        const User = {
            template: `<div class="row">
                <div class="col-md-2 siderbar">
                   sssssss
                </div>
                <div class="col-md-10 content">
                   ssssssss
                </div>
            </div>`
        }
        const System = {
            template: `<div class="row">
                <div class="col-md-2 siderbar">
                   sssssss
                </div>
                <div class="col-md-10 content">
                   sssssss
                </div>
            </div>`
        }

        //侧边栏siderBar导航组件
        const SiderBar = {
            template: `
            <ul class="nav nav-pills nav-stacked">
                <li><router-link to="/goods/order">订单管理</router-link></li>
                <li><router-link to="/goods/sku">库存管理</router-link></li>
                <li><router-link to="/goods/upper">商品上架</router-link></li>
                <li><router-link to="/goods/sale">活动促销</router-link></li>
            </ul>`
        }

        //2.创建路由表 (进行访问地址和组件的关联关系的表(映射))
        const routes = [
            {
                path: "/",
                component: Home
            },
            {
                path: "/goods",
                // component:Goods,
                redirect: "/goods/order",
                components: {
                    default: Goods,//如果没有指定视图名字,则默认为default   等价于 component:Goods,
                },
                children: [
                    {
                        path: 'order',
                        components: {
                            siderbar: SiderBar,
                            content: GoodsOrder
                        }
                    },
                    {
                        path: 'sku',
                        components: {
                            siderbar: SiderBar,
                            content: GoodsSku
                        }
                    },
                    {
                        path: 'upper',
                        components: {
                            siderbar: SiderBar,
                            content: GoodsUpper
                        }
                    },
                    {
                        path: 'sale',
                        components: {
                            siderbar: SiderBar,
                            content: GoodsSale
                        }
                    }
                ]
            },
            {
                path: "/user",
                component: User
            },
            {
                path: "/system",
                component: System
            }
        ];

        //3.创建vue 路由对象
        const router = new VueRouter({
            // routes:routes
            routes
        })

        //vm 就是根组件
        let vm = new Vue({
            el: "#app",//指定Vue挂载的DOM
            data: {//当前vue实例中使用的数据

            },
            router,// 4. 将vue路由对象挂载到对应的vue实例对象
            methods: {//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>

</html>